Примечания:

Несмотря на то, что я буду пытаться быть максимально понятным и объяснять сложные моменты, нельзя сказать, что абсолютный новичок сможет разобраться в этом материале. Конечно же, копировать и вставлять тоже можно, но для того, чтобы понять все пояснения, вам нужно будет хоть какое-то знание веб-дизайна:
Рекомендуется уверенно разбираться как в HTML, так и в CSS, но скорее всего даже с основным набором знаний вы сможете разобраться в нижеизложенном
Также важно знать, как работают JavaScrip и, особенно, jQuery

Если вы совершенно ничего не знаете об этих вещах, вы всегда можете сначала обучиться обращению с ними.

Урок 1 – Что нам понадобится для работы

Попробую объяснить с чего я начинаю свою работу по созданию вебсайта. Первое, о чем надо подумать, и, возможно, самое важное, - это о ваших «инструментах»: какие именно приложения вы будете использовать для кодирования, отлаживания (debug) и тестирования?

В моем случае, Dreamweaver – для кодирования.

Следующее, что нам надо выбрать – это браузер. Нам нужен браузер с хорошими возможностями отлаживания.

Несмотря на то, что для каждодневного пользования у меня Opera, я все-таки использую Firefox, когда занимаюсь разработкой и дизайном – все благодаря превосходному инструменту, который есть в Firefox – Firebug.

И несмотря на то, что я провожу тестирование в Firefox, на моем компьютере установлены все основные браузеры, чтобы можно было убедиться в том, что все работает отменно в каждом из них. Другими словами, полное тестирование я провожу в Firefox 3+, Opera 9.5+, Safari 3+, Chrome 1+ и Internet Explorer 7+. Благодаря этому, мои сайты должны корректно отображаться у 95% пользователей минимум.

Хорошо, теперь, когда у нас есть все необходимые для работы, нам нужно создать структуру директорий. Для того, чтобы все было аккуратно и понятно, я решил создать новый «сайт» на моем локальном сервере. В новой папке нам нужно создать еще три: js/, css/ и img/. Названия, в принципе, говорят сами за себя.

Теперь, когда у нас все готово для начала работы, мы можем начинать кодировать!

Урок 2 – Блочная модель. Начало кодирования.

Что нам сейчас нужно, это подумать немного как мы собираемся структурировать наш дизайн, какие тэги будем использовать, как их будем идентифицировать и так далее. Вот, что я придумал:

Теперь, когда мы знаем, что будем создавать, предлагаю начать с определения основ нашего документа!

Мы будем использовать xHTML Strict. Это значит, что нам придется разделять логику структуры с логикой разметки. Для того, чтобы браузер понял, какую «грамматику» мы используем, нам необходимо задать так называемое DTD – определение типа документа. The xHTML 1.0 Strict Doctype выглядит так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Этот код должен идти первым во всех ваших HTML файлах. Отсутствие такого определения может привести к ошибке подтверждения.

Дальше, нам нужно определить основу нашего сайта: верхнюю его часть и основную. Лучше поместить тэг с наименованием для отображения корректного названия в строке заголовка окна вместо «Untitled 1». Я решил разместить несколько мета-тэгов, которые также хорошо повлияют на обнаружение поисковиками, хотя мы с вами знаем, что мета-тэги сегодня уже не так нужны, как раньше.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Roadside, Studio, Design, Web, Icons, Logos" />
<meta name="description" content="Roadside Studio is a web design agency that makes beautiful websites!" />
<meta name="author" content="Felix Boyeaux" />
<meta name="robots" content="all" />

<title>Roadside Studio</title>
</head>
<body>

</body>
</html>

Как только вы закончите, можем приниматься за кодирование самого контента.

Верхняя строка над шапкой

Помните, как я вас заставил создать большое количество групп слоев и переименовать в их во что-то, определяющие их функции? Что ж, сейчас вы поймете, зачем я это сделал.

Посмотрите на эту палитру слоев:

Вы видите, что я имею в виду?

На самом деле, это дает нам структуру нашего HTML: у нас есть обертывающая папка под названием «Строка состояния», содержащая в себе другие папки, которые, в свою очередь, отображают элементы нашей страницы!

Но это не совсем надежно. Опыт показывает, что нам нужны дополнительные обертывающие блоки для того, чтобы центрировать содержимое страницы строки и в тоже время растянуть фон строки на 100% ширины. Нам также нужны обертывающие тэги для приветствующего сообщения и меню для того, чтобы заставить поле поиска переместиться направо.

Вот как должен выглядеть код:

<div id="status-bar">
<div id="status-bar-content">
<form action="#search" method="post" id="search-form">
<p>
<input type="text" name="query" value="Search" />
<input type="submit" name="submit" value="Search!" />
</p>
</form>
<div id="status-bar-commands">
<p id="welcome">Welcome, Guest</p>
<p id="action-bar">
<a href="#login" title="Login">Login</a>
<a href="#sitemap" title="Sitemap">Sitemap</a>
<a href="#license" title="License">License</a>
</p>
</div>
</div>
</div>

Тэг «Div» с id="status-bar" – наш контейнер. Блок «status-bar-content» необходим для центрирования содержимого этой строки. Обратите внимание на тэги <p> внутри тэгов <form>. Это необходимо для подтверждения xHTML 1.0 Strict.

Последняя важная вещь в этом фрагменте кода – это то, что мы не заменили тэги <p> на тэги <div>. Вебдизайнеры называют это семантическим кодированием. Параграф должен быть всегда обернут для того, чтобы сделать ударение на том, что это читаемый текст. Это также упрощает чтение для скрин-ридеров.

Отлично! Это все, что нужно сделать для строки состояния. Не так ужи сложно, правда?

Секрет в том, чтобы логически следовать нашей иерархии слоев в PSD для того, чтобы правильно построить нашу разметку. Только не забудьте соблюдать свой HTML семантичным.

Урок 3 - Шапка

Нам нужно посмотреть на палитру слоя, чтобы понять как его создавать.

А теперь давайте «переведем» эту структуру на код.

Нам понадобится контейнер, блок для лого, и два текстовых блока: один для заголовка, а один для подзаголовка. Хотя в этом случае мы не будем использовать тэги <p>.

Почему?

Просто потому, что мы можем быть даже более семантичны, используя тэги заголовка. Так как текст заголовка – это первое заглавие в нашем документе, то мы обвернем его тэгом <h1>. Подзаголовок будет тэгом <h2>, так как это будет вторым заглавием в документе.

<div id="header">
<div id="logo">
<h1><a href="#home" title="Home Page">Roadside</a></h1>
<h2>Studio</h2>
</div>
</div>

Здесь мы еще добавили ссылку с логотипа на домашнюю страницу. Это связка, которую использует каждый вебдизайнер. Кроме того, ее хорошо знают пользователи, а значит отсутствие такой связки может сбить толку пользователей. Кроме сказанного выше, говорить больше нечего про этот этап дизайна, поэтому давайте перейдем к части контента.

Урок 4 - Вкладки

Перед работой с самими вкладками, нам надо создать общий контейнер с id="content". Туда же мы затем поместим блок твиттера и блок с записями блога.

Как только это будет сделано, надо будет подумать немного о меню, и как оно будет выстроено.

Лучший способ кодировать меню – беспорядочный список, даже несмотря на то, что мы хотим горизонтальное меню.

Почему список? Потому, что списки хороши для отображения пунктов с одинаковыми достоинствами, без выделения одних над другими. Это именно то, что нам нужно.

В каждом пункте списка мы, естественно, добавляем тэг-якорь. Эта якорная ссылка на самом деле никуда не ведет.

<div id="content">
<ul id="tabs">
<li id="previous">
<a href="#previous" title="Previous"><</a>
</li>
<li id="home" class="current">
<a href="#home" title="Home">Home</a>
</li>
<li id="portfolio">
<a href="#portfolio" title="Portfolio">Portfolio</a>
</li>
<li id="about">
<a href="#about" title="About">About</a>
</li>
<li id="contact">
<a href="#contact" title="Contact">Contact</a>
</li>
<li id="next">
<a href="#next" title="Next">></a>
</li>
</ul>
</div>

Вы должны заметить, что мы не помещали пункты вкладок в отдельный блоки div со своим id. Это потому, что тэг <ul> уже выполняет эту функцию для нас. Вы всегда должны стараться убрать как можно больше ненужных блоков div для того, чтобы сделать страницу чище и быстрее.

Вы также можете спросить себя какую функцию исполняют < и >.Они означают «меньше чем» и «больше чем» соответственно, и это просто html версия для < и >.

Сильно не волнуйтесь насчет того, что наше горизонтальное меню со ссылками на данный момент – вертикальный список; мы убедимся, что оно выглядит надлежащим образом, когда будем писать CSS.

Урок 5 - Центральный блок

«Центральный блок» - это то, чем я называю окошко со слайдшоу и приветственное сообщение. Мы создадим блок div с id="page-wrapper". Этот div, естественно, также помещается в основной блок div, который мы создавали для контента (id="content").

Теперь нам надо написать код для слайдшоу. Мы создадим контейнер с id="slideshow". Внутри мы создадим div под названием «слайды» (id="slides"), который будет содержать все изображения, которые будут чередоваться.

Вокруг них также находится ссылка, чтобы перенаправлять пользователей в раздел портфолио. Div с ID="slideshow-commands" содержит кнопки переключения слайдов и название текущего слайда.

<div id="page-wrapper">
<div id="slideshow">
<div id="slides">
<a href="#portfolio.work1" title="See details" class="thumb default-slide">
<img src="img/1.png" alt="Flex Engine Web Design" class="slideshow-image" /> </a>
<a href="#portfolio.work2" title="See details" class="thumb">
<img src="img/2.png" alt="Concept Labs Portfolio" class="slideshow-image" /> </a>
<a href="#portfolio.work3" title="See details" class="thumb">
<img src="img/3.png" alt="Everlast Studio" class="slideshow-image" /> </a> </div>
<div id="slideshow-commands">
<a href="#previous" title="Previous" id="previous-slide"><</a>
<a href="#next" title="Next" id="next-slide">></a>
<h4>
<a href="#portfolio.work1" title="See details" id="slide-title">
Flex Engine Web Design </a> </h4>
</div>
</div>
</div>

Важно обратить внимание на то, как мы добавили все изображения-слайды в наш контейнер, для того, чтобы сделать просмотр слайдов проще.

Еще мы должны иметь один слайд по умолчанию. По этой причине я добавил класс «default slide» первому изображению.

Для того, чтобы сделать изменение стиля проще, просто добавьте еще класс «thumb» к тем же изображениям. Множество классов может быть присвоено одному элементу с помощью их разделения пробелом. Атрибут alt на изображениях - обязателен для эффективности кода. Это также будет важно для слайдшоу, так как именно сюда мы пропишем название слайда.

Следующий шаг в этом блоке - это отображаемое сообщение и контактная информация справа от слайдшоу. Это будет очень просто.

Нам понадобится заголовок h3, так как это уже третье заглавие на странице, тэг <p> содержащий само сообщение и тэг <p>, содержащий контактную информацию.

<div id="message">
<h3>We build great websites!</h3>
<p>
Curabitur nec sem in risus adipiscing feugiat. Etiam elementum malesuada purus.
Quisque nec mi eu mauris ornare aliquam. Praesent adipiscing,
metus sed luctus condimentum, quam turpis interdum tortor,
in dignissim magna urna tempor odio. Integer porttitor. Nam dolor urna,
ultricies vitae, porttitor ut, dignissim vitae, elit.
</p>
<p id="contact-info">
<span id="phone">+33 1 23 45 67 89</span>
<span id="address">
34, Avenue des Champs-<br />
Elysées, 75006, Paris,<br />
France
</span>
</p>
</div>

Обратите внимание на то, как мы поставили тэги <span> вокруг телефонного номера и адреса, чтобы можно было менять их стиль по отдельности.

Как только это будет сделано, пришло время немного отдохнуть и посмотреть, что мы сделали. Отлично, так как теперь мы можем заняться кодированием модулей.

Урок 6 - Модуль блога, твиттера и футер

Код здесь достаточно прост. Нам нужно добавить блок div с id="blog" и и классом class="module", чтобы изменять оба (есть еще модуль твиттера) модуля одновременно, так как они почти идентичны.

Заголовок модуля будет h4, а названия постов - h5. Это создаст понятную структуру и иерархию в нашем документе. Последнее, о чем стоит подумать, это несколько рядов с заметками блога.

Мы поместим их в тэги «blockquotes».

Зачем?

Затем, что даже несмотря на то, что это не совсем правильная цитата, все же это часть текста, взятого из другой части вебсайта, поэтому здесь очень уместно использовать blockquotes.

Мы также разместим ссылку "Читать дальше" (Read more), обвернутую в тэг <p>.

<div class="module" id="blog">
<h4 class="module-header-bar">Latest entries from the blog</h4>
<div class="blog-entry">
<h5><a href="#blogentry1" title="Vivamus sed risus">Vivamus sed risus</a></h5>
<p class="meta">By Jonathan Davidson - 05 / 08 / 09</p>
<blockquote class="content">
<p>
Vivamus sed risus quis felis sagittis cursus. Duis blandit tristique turpis. Nulla feugiat vehicula metus. </p>
</blockquote>
</div>
<div class="blog-entry">
<h5><a href="#blogentry2" title="Pellentesque pulvinar">Pellentesque pulvinar</a> </h5>
<p class="meta">By The Team - 05 / 01 / 09</p>
<blockquote class="content">
<p>
Pellentesque pulvinar dolor nec orci. Pellentesque scelerisque elit. </p>
</blockquote>
</div>
<div class="blog-entry">
<h5><a href="#blogentry3" title="Cras in nibh">Cras in nibh</a></h5>
<p class="meta">By Nicholas Denman - 05 / 01 / 09</p>
<blockquote class="content">
<p>
Quisque dapibus, justo a bibendum pellentesque, tellus felis cursus libero, posuere sodales diam ipsum in lorem. </p>
</blockquote>
</div>
<p id="read-more-wrapper">
<a href="#blog" title="Read More">
Read More </a> </p>
</div>

Каждая запись обвертывается в свой собственный блок div для того, чтобы сделать разбивку проще.

Модуль Twitter

Модуль Twitter будет похожим на модуль блога, поэтому я пройдусь по нему быстрее. Главное, помните, что структура за создаваемым нами HTML определяется нашей палитрой слоев в PSD файле. В этом случае, например, вот как выглядит группа слоев модуля Twitter:

Поэтому нам понадобится блок для заглавной строки, а также контейнеры для каждого твита, но кроме того и блок, содержащий кнопку. Вот как будет выглядеть код:

<div class="module" id="twitter">
<h4 class="module-header-bar">Follow the Roadside Team on Twitter</h4>
<div class="tweet">
<img src="img/tw1.png" alt="Jonathan Davidson" />
<h5><a href="#@JonathanDavidson" title="Jonathan Davidson">Jonathan Davidson</a></h5>
<blockquote>
<p>
Proin et libero. Curabitur molestie mauris eu massa. </p>
</blockquote>
</div>
<div class="tweet">
<img src="img/tw2.png" alt="Nicholas Denman" />
<h5><a href="#@NicholasDenman" title="Nicholas Denman">Nicholas Denman</a></h5>
<blockquote>
<p>
Etiam felis ligula. </p>
</blockquote>
</div>
<div class="tweet">
<img src="img/tw3.png" alt="Jessica Marshall" />
<h5><a href="#@JessicaMarshall" title="JessicaMarshall">Jessica Marshall</a></h5>
<blockquote>
<p>
Pellentesque est massa, posuere eu. </p>
</blockquote>
</div>
<div class="tweet">
<img src="img/tw4.png" alt="Ann De Wever" />
<h5><a href="#@AnnDeWever" title="Ann De Wever">Ann De Wever</a></h5>
<blockquote>
<p>
Nulla facilisi. Nam lacinia tristique ante. </p>
</blockquote>
</div>
<p id="get-tweets-wrapper">
<a href="#twitter">
Get More Tweets! </a> </p>
</div>

Здесь нет ничего нового, мы все также используем blockquotes для контента твита. Мы также создали ссылку на страницу Twiter с помощью h5. Кроме того, мы используем тот же синтаксис для ссылки «Get More Tweets», что и для ссылки «Read more».

Футер

Последняя часть нашего документа HTML – это нижний блок. Его очень просто сделать. Нам понадобится блок div с id="footer", внутри него блок div для изображения и параграф для копирайтов.

<div id="footer">
<div id="footer-image"></div>
<p id="footer-text">
Copyright © 2009 Roadside Studio<br /> All Rights Reserved
</p>
</div>

Хорошо, верьте или нет, но мы закончили с разметкой. Вы теперь видите, что не так уж и сложно создать правильный и действенный код HTML, просто следуя группам слоев. Секрет в том, чтобы делать это медленно и логически, чтобы ничего не упустить.

А вот код, который мы создали:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Roadside, Studio, Design, Web, Icons, Logos" />
<meta name="description" content="Roadside Studio is a web design agency that makes beautiful websites!" />
<meta name="author" content="Felix Boyeaux" />
<meta name="robots" content="all" />
<LINK rel="stylesheet" media="screen" type="text/css" title="Style" href="css/style.css">
<title>Roadside Studio</title>
</head>
<body>

<div id="status-bar">
<div id="status-bar-content">
<form action="#search" method="post" id="search-form">
<p>
<input type="text" name="query" value="Search" />
<input type="submit" name="submit" value="Search!" />
</p>
</form>
<div id="status-bar-commands">
<p id="welcome">Welcome, Guest</p>
<p id="action-bar">
<a href="#login" title="Login">Login</a>
<a href="#sitemap" title="Sitemap">Sitemap</a>
<a href="#license" title="License">License</a>
</p>
</div>
</div>
</div>

<div id="header">
<div id="logo">
<h1><a href="#home" title="Home Page">Roadside</a></h1>
<h2>Studio</h2>
</div>
</div>

<div id="content">
<ul id="tabs">
<li id="previous">
<a href="#previous" title="Previous"><</a> </li>
<li id="home" class="current">
<a href="#home" title="Home">Home</a> </li>
<li id="portfolio">
<a href="#portfolio" title="Portfolio">Portfolio</a> </li>
<li id="about">
<a href="#about" title="About">About</a> </li>
<li id="contact">
<a href="#contact" title="Contact">Contact</a> </li>
<li id="next">
<a href="#next" title="Next">></a> </li>
</ul>

<div id="page-wrapper">
<div id="slideshow">
<div id="slides">
<a href="#portfolio.work1" title="See details" class="thumb default-slide">
<img src="img/1.png" alt="Flex Engine Web Design" class="slideshow-image" /> </a>
<a href="#portfolio.work2" title="See details" class="thumb">
<img src="img/2.png" alt="Concept Labs Portfolio" class="slideshow-image" /> </a>
<a href="#portfolio.work3" title="See details" class="thumb">
<img src="img/3.png" alt="Everlast Studio" class="slideshow-image" /> </a> </div>
<div id="slideshow-commands">
<a href="#previous" title="Previous" id="previous-slide"><</a>
<a href="#next" title="Next" id="next-slide">></a>
<h4>
<a href="#portfolio.work1" title="See details" id="slide-title">
Flex Engine Web Design </a> </h4>
</div>
</div>

<div id="message">
<h3>We build great websites!</h3>
<p>
Curabitur nec sem in risus adipiscing feugiat. Etiam elementum malesuada purus.
Quisque nec mi eu mauris ornare aliquam. Praesent adipiscing,
metus sed luctus condimentum, quam turpis interdum tortor,
in dignissim magna urna tempor odio. Integer porttitor. Nam dolor urna,
ultricies vitae, porttitor ut, dignissim vitae, elit. </p>
<p id="contact-info">
<span id="phone">+33 1 23 45 67 89</span>
<span id="address">
34, Avenue des Champs-<br />
Elysées, 75006, Paris,<br />
France </span> </p>
</div>
</div>

<div class="module" id="blog">
<h4 class="module-header-bar">Latest entries from the blog</h4>
<div class="blog-entry">
<h5><a href="#blogentry1" title="Vivamus sed risus">Vivamus sed risus</a></h5>
<p class="meta">By Jonathan Davidson - 05 / 08 / 09</p>
<blockquote class="content">
<p>
Vivamus sed risus quis felis sagittis cursus. Duis blandit tristique turpis. Nulla feugiat vehicula metus. </p>
</blockquote>
</div>
<div class="blog-entry">
<h5><a href="#blogentry2" title="Pellentesque pulvinar">Pellentesque pulvinar</a> </h5>
<p class="meta">By The Team - 05 / 01 / 09</p>
<blockquote class="content">
<p>
Pellentesque pulvinar dolor nec orci. Pellentesque scelerisque elit. </p>
</blockquote>
</div>
<div class="blog-entry">
<h5><a href="#blogentry3" title="Cras in nibh">Cras in nibh</a></h5>
<p class="meta">By Nicholas Denman - 05 / 01 / 09</p>
<blockquote class="content">
<p>
Quisque dapibus, justo a bibendum pellentesque, tellus felis cursus libero, posuere sodales diam ipsum in lorem. </p>
</blockquote>
</div>
<p id="read-more-wrapper">
<a href="#blog" title="Read More">
Read More </a> </p>
</div>

<div class="module" id="twitter">
<h4 class="module-header-bar">Follow the Roadside Team on Twitter</h4>
<div class="tweet">
<img src="img/tw1.png" alt="Jonathan Davidson" />
<h5><a href="#@JonathanDavidson" title="Jonathan Davidson">Jonathan Davidson</a></h5>
<blockquote>
<p>
Proin et libero. Curabitur molestie mauris eu massa. </p>
</blockquote>
</div>
<div class="tweet">
<img src="img/tw2.png" alt="Nicholas Denman" />
<h5><a href="#@NicholasDenman" title="Nicholas Denman">Nicholas Denman</a></h5>
<blockquote>
<p>
Etiam felis ligula. </p>
</blockquote>
</div>
<div class="tweet">
<img src="img/tw3.png" alt="Jessica Marshall" />
<h5><a href="#@JessicaMarshall" title="JessicaMarshall">Jessica Marshall</a></h5>
<blockquote>
<p>
Pellentesque est massa, posuere eu. </p>
</blockquote>
</div>
<div class="tweet">
<img src="img/tw4.png" alt="Ann De Wever" />
<h5><a href="#@AnnDeWever" title="Ann De Wever">Ann De Wever</a></h5>
<blockquote>
<p>
Nulla facilisi. Nam lacinia tristique ante. </p>
</blockquote>
</div>
<p id="get-tweets-wrapper">
<a href="#twitter">
Get More Tweets! </a> </p>
</div>
</div>

<div id="footer">
<div id="footer-image"></div>
<p id="footer-text">
Copyright © 2009 Roadside Studio<br />
All Rights Reserved
</p>
</div>

</body>
</html>

Урок 7 – Переходим к CSS. Блочная модель.

CSS – это неимоверно простой каскадирующий язык с неимоверно простым синтаксисом, а это значит, что его очень просто выучить. Но сперва, из-за сбоев браузера, может показать немного сложным им овладеть.

Мы попробуем использовать как можно более простой и понятный CSS, в то же время пытаясь заставить его работать на всех браузерах. Для того, чтобы это сделать, есть одна концепция, которую нужно выучить. Я говорю о box модели.

«Блочная модель (box model) – это то как браузер воспринимает и отображает элементы на веб-странице.

Это стандартная модель W3C. Что важно заметить здесь, так это то, что реальная ширина рамки – не та, которая обозначена в свойствах ширины.

Давайте, к примеру, возьмем блок шириной 200 пикселей, 25 пикселей внутренние отступы с каждой стороны и рамка в 5 пикселей. Реальная отображаемая ширина блока, в таком случае, будет 260 пикселей, а не 200, как мы этого хотели.

Если же нам нужен блок со строгой шириной в 200 пикселей, нам всего лишь надо указать основную ширину в 140 пикселей, и всё. Важно просто знать, как это работает. Это поможет вам избежать головных болей в будущем.

Хорошо, теперь, когда вы знакомы с концепцией W3C’ box модели, мы можем начать кодировать наш дизайн.

Урок 8 - Сброс CSS и оформление текста.

Я раньше говорил об изменчивости браузеров, которые самовольно могут устанавливать зазор 10 пикселей для каждого блока, а иногда и 15. Это может вызвать проблемы во время кодирования, из-за которых мы можем долго искать ошибки в собственном коде.

Для того, чтобы решить эту проблему мы будем использовать сброс CSS (CSS Reset).

Существует масса разных версий, но я думаю, что лучшей все-таки остается версия Эрика Майера. Мне просто нравится, как работает этот вариант. После него все работает предсказуемо и у нас появляется контроль над разметкой.

Вы можете достать этот фаил сброса здесь: http://meyerweb.com/eric/tools/css/reset/. Я решил поместить это в отдельный CSS файл под названием reset.css, после чего я вкладываю это все в папку CSS.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

Я немного подредактировал данный фаил и удалил элементы из-за которых фаил не прошел бы валидацию.

На данный момент, если вы перезагрузите файл index.html в своем браузере, вы не увидите особых изменений. Это благодаря тому, что мы еще не сделали ссылку на таблицу стилей из HTML. Но мы не будем подключать данную таблицу через секцию <head> нашего сайта. Вместо этого, мы будем вызывать файл reset.css из нашей основной таблицы стилей используя команду @import, когда начнем ее создавать.

CSS фаил с правилами оформления текста

Обычно я делю CSS на две части. Одна из них контролирует структуру страницы, это моя основная таблица стилей, а другая контролирует оформление. Оформление включает в себя выравнивание текста, цвет шрифта, интервалы между буквами, высоту строк и т.д.

Это стоит делать потому, что это дает вам больше гибкости в процессе кодирования. Предположим, вы хотите изменить размер шрифта h1 с 36 на 48 пикселей. Вместо того, чтобы начинать копаться в style.css, который наверное содержит в себе несколько сотен строк, вы можете просто открыть свою таблицу стилей оформления, найти относящийся к h1 тэг, изменить размер шрифта и всё!

При кодировании таблицы стилей оформления, наша разметка в Photoshop будет невероятно полезной. Мы можем взять Type Tool (T) в Photoshop и начать выделять различные текстовые блоки в нашем дизайне.

Так мы сможем видеть, что у h1 размер шрифта будет 48 пикселей, цвет #4d4d4d, а шрифт – Myriad Pro. Последняя часть может быть причиной проблем. Myriad Pro – не стандартный шрифт для сети, поэтому мы не можем определить семью шрифтов, начинающуюся с Myriad Pro и думать, что все увидят наш дизайн так, как должны. Мы решим эту проблему немного позже, используя более сложную технику, но на сейчас, мы просто определим свойство семьи шрифтов, включающую Myriad Pro, и еще некоторые запасные шрифты на случай, если у пользователя не установлен Myriad Pro на компьютере.

Если мы будем продолжать в том же духе – сканировать весь наш PSD фаил для получения всей информации о шрифте, мы увидим, что наши тэги h3 должны иметь размер шрифта 24 пикселя, наши тэги h5 должны быть #6eb9cc цвета и так далее. Если мы логически продолжим, вот что мы получим:

h1 {
color: #4d4d4d;
font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
font-size: 48px;
font-weight: normal;
}
h1 a { color: #4d4d4d; text-decoration: none; }
h2 {
color: #6ec9cc;
font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
font-size: 12px;
letter-spacing: 28px;
text-transform: uppercase;
}
h3 {
color: #6ec9cc;
font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: normal;
}
h4 {
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
text-align: center;
}
h4 a { color: #ffffff; text-decoration: none; }
h5 {
color: #6ec9cc;
font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: normal;
}
h5 a { color: #6ec9cc; text-decoration: none; }
/* Paragraph styling */
p {
color: #525252;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
p.meta { color: #707070; font-size: 10px; text-align: right; }
p#footer-text { text-align: center; }
div#message p { color: #4d4d4d; line-height: 20px; }
/* Link styling */
a {
color: #999999;
text-decoration: none;
}
a:hover { text-decoration: none; }
p#action-bar a { color: #ffffff; }
p#action-bar a:hover { color: #6eb9cc; text-decoration: none; }

Не думаю, что здесь есть что-то, что нужно объяснять. Это только базовая структура стиля. Обратите внимание, что я задаю стиль стандартным тэгам <p> и стандартным тэгам-якорям, прежде чем задать внешний вид более конкретным текстовым блокам, таким как мета-параграфы, например. Это часть концепции кодирования «Не повторяй себя».

Резервными шрифтами, которые я решил использовать, являются Helvetica и Arial. Они не самые лучшие замещения Myriad, но, просто, скорее всего, они нам просто не понадобятся, и я объясню это позже. Но пусть будут, на всякий случай.

Кое-что, о чем я хочу здесь поговорить, это стиль кодирования. Конечно, отступы важны для читаемости кода, но не только. С первого взгляда, вы можете подумать, что мой код выглядит немного беспорядочно, но если вы присмотритесь, вы заметите, что я следую очень строгому синтаксису. Первый момент этого синтаксиса – это выстраивать свойства в алфавитном порядке. Это очень сильно помогает в нахождении определенного свойства, если вы позже хотите его отредактировать. Второй момент - это написание правил на одной линии в том случае, если не используется больше чем трех правил.

Самой важной вещью со стилем вашего кодирования является последовательность. Вам должен нравится ваш стиль кодирования. Я не говорю, что мой способ наилучший, мне он просто нравится. Но я поддерживаю вас в ваших поисках собственного стиля, который сделает кодирование еще быстрее!

Урок 9 - Настройка основной таблицы стилей

Когда мы справились с reset, я предложил вам не вносить его прямо в файл html с помощью ссылки, так как мы собирались вызывать его прямо с нашей основной таблицы стилей. Вы конечно же могли бы внести все ваши файлы CSS в код HTML, но я решил этого не делать, так как это сохраняет верхний раздел в чистоте.

Нам нужно создать нашу главную таблицу стилей. Я обычно называю её style.css, но вы можете назвать ее main.css, master.css, screen.css или как угодно. В эту таблицу стилей мы включим наш reset, а также нашу таблицу стилей оформления. Для того, чтобы это сделать, я использую правило @import. Таким образом Ваши первые строки в файле style.css должны выглядит следующим образом:
@import url('reset.css');
@import url('typography.css');

Этими двумя строками мы подключаем к файлу style.css сразу две таблицы стилей, и в итоге в html документ нам надо будет подключать только одну таблицу стилей.

Если вы посмотрите на нашу страницу теперь, то увидите следующее:

Я должен буду согласиться с вами, если бы вы сказали, что она не так уж и здорово выглядит на данный момент, но вы все же можете заметить, что некоторые детали выглядят именно так, как мы этого хотим, мета-параграфы, например, или даже логотип.

Основная часть (body)

Нам нужно определить основной стиль для тэга <body>, включающий в себя центрирование дизайна, используя конструкцию margin: auto; определение цвета фона, и определение ширины на 100%.

body {
background-color: #f8f8f8;
margin: auto;
width: 100%;
}

Урок 10 - Кодирование верхней панели

Как и всегда, мы начнем сверху, и будем создавать дизайн систематически, идя к нижнему футеру.

Я люблю кодировать разбивая дизайн на блоки. Я начинаю с заголовка, затем делаю дизайн контента и так далее. Это мотивирует меня. Такой подход также предполагает полное завершение одного раздела до начала нового.

Начнем кодирование с CSSкода для верхней панели. Давайте немного подумаем какие изображения нам нужны.

Первым является изображение фона, которым является простой градиент, повторяющийся на оси х.

Вторым будет фон для меню: закругленный прямоугольник.

Давайте начнем с фонового изображения. Как я и сказал, мы будем повторять это изображение на оси х, поэтому нам нужно изображение шириной всего лишь 1 пиксель.

Это очень сильно уменьшит общий размер. Поэтому начинайте с использования Single Column Marquee Tool в Photoshop, идите к группе слоев «Верхняя панель», спрячьте слой «граница» и соедините слои «фон» и «тень» в одно целое. После этого, выберите часть созданного слоя инструментом выделения, скопируйте ее и вставьте в новый документ.

Новый документ должен быть 1*50 пикселей. Из-за особенностей блочной модели, мы должны будем уменьшить высоту до 40 пикселей. Просто уберите 10 верхних пикселей и сохраните фаил для Web & Devices (Alt + Shift + Ctrl + S) в PNG 24, и назовите файл status-bar-bg.png.

Теперь приступим к фону меню.

Откройте группу слоев «Строка действий» и выберите слой под названием «фон строки действий». Выберите весь документ (Ctrl + A), скопируйте его и вставьте в новый документ. Вам надо будет растеризовать форму, чтобы правильно его скопировать. Не забудьте установить слою прозрачность на уровне 55%. Опять сохраните файл для Web & Devices и назовите его action-bar-bg.png.

Окончательная ступень в конвертации дизайна в изображения - поисковое поле. Просто найдите группу слоев «Поисковая форма», спрячьте слой со словом «Поиск» и соедините в один слой лупу и форму. Опять, выберите целый документ с помощью Ctrl + A и скопируйте его в новый файл. Сохраните как search-field.png.

Теперь, когда мы закончили с картинками, мы можем начать кодирование. Первое, что мы хотим сделать – это обозначить правила для блоков div. Установите их ширину и высоту также, как и фоновое изображение и отступы.

div#status-bar {
background: url('../img/status-bar-bg.png') repeat-x;
border-bottom: 2px groove #ffffff;
height: 40px;
width: 100%;
}

Стиль groove для рамок смотрится очень красиво – так как мы его сделали в Photoshop. Мы установили ширину 40 пикселей даже несмотря на то, что ширина фона – 50 пикселей. Причина – блочная модель.

После этого надо убедиться, что контент этой строки центрирован. Уловка в том, чтобы фон был растянут на 100% ширины в то время, как контент должен быть центрирован. Вот почему мы использовали блок div, содержащий практически все элементы верхней строки.

Для этого блока мы будем использовать ширину 800 пикселей и отступы.

div#status-bar-content {
margin: 10px auto 0px auto;
width: 800px;
}

Чтобы правильно разместить обе части этой статусной строки, левую и правую, мы устанавливаем свойства ширины и смещения (float).

div#status-bar-commands {
width: 400px;
}

form#search-form {
float: right;
width: 200px;
}

Теперь надо придать стиль менюшке в верхней панели. Нам надо отцентрировать меню по центру панели и добавить фоновое изображение.

Отступы используются, чтобы все выглядело так, как должно. Не забывайте про блочную модель при установке свойств! Именно поэтому мы установили высоту меню на 14 пикселях вместо 30; у нас 8 пикселей - отступы с каждой стороны.

p#welcome {
float:left;
padding-top: 7px;
width: 150px;
}

p#action-bar {
background: url('../img/action-bar-bg.png') no-repeat;
height: 14px;
margin-left:200px;
padding: 8px 28px;
width: 154px;
}

p#action-bar a:before {
content: '| ';
}

p#action-bar a[title="License"]:after {
content: ' |';
}

Мы добавляем «|» для разделения ссылок в меню. Я решил это сделать, так как это более корректно с точки зрение семантики. На самом деле, эти вставки не играют никакой роли для нашего контента, поэтому включать их в html было бы неправильным. Обратите внимание на довольно сложный последний сектор, который выделяет последнюю ссылку и добавляет <|> как перед ней, так и после.

И наконец, мы будем стилизировать поисковое поле и добавлять фоновое изображение к нему. Нам нужно возобновить стиль по умолчанию браузера и спрятать кнопку «submit». Это может не самое лучшее решение в отношении доступности, но все же, в этом случае на первое место я ставлю дизайн.

form#search-form input[type="text"] {
background: url(../img/search-field.png) no-repeat;
border:none;
height:20px;
padding: 5px 0px 0px 30px;
width:170px;
}

form#search-form input[type="submit"] {
display: none;
}

Вот, что должно получиться:

Выглядит достаточно похоже на наш PSD, не так ли? Вот именно это нам и надо! Давайте продолжим.

Урок 11 - Кодирование хедера

Header достаточно прост в кодировании.

Первое, что нужно сделать, это подготовить изображение. Просто найдите группу слоев «Header» и соедините слой «Image» и «Shape» вместе. Теперь выделите документ с помощью Ctrl + A и наконец скопируете и вставьте его в новый документ. Файл должен быть 1600*250 пикселей.

Но теперь у нас есть проблема. Мы не хотим, чтобы изображение повторяло само себя, если у пользователя расширение экрана шире, чем 1600 пикселей. Поэтому нам надо убрать края, добавив маску слоя, делая левый и правый края прозрачными. Но прозрачность на таких больших изображениях может очень долго грузиться, поэтому я просто заполнил фон #6eb9cc.

Это изображение – большое, поэтому нам надо сжать его, чтобы оно грузилось быстрее. Я решил сохранить его в PNG 8 в только 256 цветах. Это уменьшит размер на почти 80% по сравнению с PNG 24, а это великолепный результат! Назовите файл header-image.png.

Так, а теперь вернемся к коду. Мы хотим, чтобы наше изображение было центрировано в блоке div с id="header" . Но чтобы широкоэкранки правильно отображали наш дизайн, нам надо применить фоновый цвет так, чтобы он мог затухать корректно. Мы также устанавливаем отступы. Вместо использования groove, я использую стиль ridge, а он является противоположностью, так как ставит начальный цвет сверху, а не внизу – то, что нам надо сейчас. Я также добавляю немного стиля к логотипу, чтобы он отображался корректно.

div#header {
background: url('../img/header.png') no-repeat;
background-color: #6eb9cc;
border-bottom: 2px ridge #ffffff;
height: 250px;
width: 100%;
}

div#logo {
margin: auto;
padding-top: 35px;
width: 800px;
}

Проверить наш результат:

Урок 12 - Контент

Нам надо немного нарушить правило семантики. Для того, чтобы разместить сверху снизу тени для контентного блока div, нам надо создать пустые блоки div в нашей разметке: один с ID «content-top-shadow», а другой с ID «content-bottom-shadow». Первые блоки div должны быть размещены между блоками div header и content, а остальные между content и footer. Я знаю, что мы могли бы использовать различные фоны CSS 3 для решения этой проблемы, но дело в том, что различные фоны еще не поддерживаются всеми браузерами.

Чтобы реализовать блоки с тенями, найдите группу слоев "Content / Box" и соедините их в единый фон с двумя слоями тени. Потом используйте Single Column Marquee Tool и выберите часть она размером в 1 пиксель. Скопируйте и вставьте в новый документ. Теперь используйте Crop Tool для cropa верхних 20 пикселей изображения. Сохраните это все для Web & Design как PNG 24 и назовите content-top-shadow.png. Тогда сделайте Edit -> Transfor -> Rotate 180 и сохраните снова, только в этот раз как content-bottom-shadow.png.

К div#content мы добавляем элементарные правила (задаем ширину и отступ) и добавляем два контейнера «content-shadow». Мы также устанавливаем высоту и ширину, фоновое изображение, повторяющееся по оси x. Это создает иллюзию тени. Я также употребляю clear: both; к content-bottom-shadow, чтобы отменить обтекание.

div#content {
margin: auto;
padding-bottom: 50px;
position: relative;
width: 800px;
}

div#content-top-shadow {
background: url('../img/content-top-shadow.png') repeat-x;
height: 20px;
width: 100%;
}

div#content-bottom-shadow {
background: url('../img/content-bottom-shadow.png') repeat-x;
clear: both;
height: 20px;
width: 100%;
}

Обратите внимание, что мы устанавливаем position: relative; для блока div с id="content". Это пригодится при размещении навигационного меню.

Хорошо, теперь когда мы закончили с этой частью, мы можем приступить к работе над внутренниким стилями внутри контентного блока.

Урок 13 - Центральный блок

Вместо того, чтобы начать со стилизирования меню, мы сначала убедимся, что наш центральный блок отображается корректно.

Для начала добавим основные стили к центральному блоку. Определим ширину и отступы также, как и в PSD, не забывая о блочной модели W3C, добавляем белый фоновый цвет и границу.

Из-за того, что мы будем использовать свойство float для отображения навигационного меню, нам необходимо использовать clear: both, а так как мы используем определенную высоту, то нам надо избавиться от любого перебора, чтобы не нарушить нашу разметку. Для этого мы будем использовать свойство overflow: hidden

div#page-wrapper {
background-color: #ffffff;
border: 1px solid #bababa;
clear: both;
height: 233px;
margin-top: 75px;
overflow: hidden;
padding: 15px;
width: 768px;
}

Теперь мы хотим создать дизайна для нашего слайдшоу. Это тоже довольно элементарно. Благодаря блочной модели, мы можем использовать свойство границ для отображения вертикального разделителя, нужного нам между слайдшоу и сообщением.

div#slideshow {
border-right: 1px solid #b2b2b2;
float: left;
padding-right: 15px;
width: 375px;
}

Теперь надо убедиться, что мы показываем только одно уменьшенное изображение при загрузке, так как на данный момент у нас загружаются все три изображения одновременно, что полностью рушит наш дизайн.

Мы могли бы разобраться с этой проблемой через JavaScript, но это не приемлемо, так как люди без активированного JS не смогут загрузить нашу страницу.

После придачи стиля каждому изображению, мы прячем их все, а потом отображаем только один с class "default-slide".

div#slides {
border: 1px solid #a7a7a7;
height: 200px;
width: 370px;
}

div#slides a.thumb {
display:none;
}

div#slides a.default-slide {
display:block;
}

Как только мы это сделали, последним шагом будет придание стиля командам слайдшоу. Нам надо вырезать некоторые изображения из PSD.

Вы уже, наверное, привыкаете к процессу, поэтому просто следуйте группе слоев "Контент / Центральный блок/ Слайдшоу / Блок управления" и растеризируйте все слои. Скопируйте левую стрелку, правую стрелку, и фон в новые документы, и сохраните их как commands-previous-slide.png, commands-next-slide.png and commands-bg.png соответственно.

Теперь нам надо включить их в наш шаблон. Сперва мы разместим фоновый блок и зададим для него ширину и высоту, а также добавим свойство position: relative, чтобы можно было центрировать его под изображением слайда с помощью своиства left.

После этого можем использовать элементарную технику замещения изображения, чтобы наши команды «previous» и «next» выглядели привлекательно.

Наконец, margin-top в названии необходим для вертикального центрирования.

div#slideshow-commands {
background: url('../img/commands-bg.png') no-repeat;
height: 19px;
left: 15px;
padding: 3px 25px;
position: relative;
width: 290px;
}

a#previous-slide {
background: url('../img/commands-previous-slide.png') no-repeat;
display: block;
float: left;
height: 12px;
margin-top: 2px;
text-indent: -9000px;
width: 9px;
}

a#next-slide {
background: url('../img/commands-next-slide.png') no-repeat;
display: block;
float: right;
height: 12px;
margin-top: 2px;
text-indent: -9000px;
width: 9px;
}

div#slideshow-commands h4 {
margin-top:1px;
width:100%;
}

Отлично, теперь слайдшоу отображается правильно. Осталось только стилизировать сообщение, и мы закончим с центральным блоком. Стайлинг будет достаточно прост, так как в основном он был уже сделан в файле typography.css.

Мы сначала устанавливаем блочный стиль для того, чтобы у сообщения был левый отступ 15 пикселей и сделаем также нижний отступ, чтобы между заголовком и текстом было посвободнее.

div#message {
margin-left: 410px;
width: 350px;
}

div#message h3 {
margin-bottom: 20px;
}

Самым сложным будет стилизирование контактной информации. Прежде, чем мы начнем, сохраните иконки телефона и конверта в отдельные файлы и назовите их phone-icon.png и address-icon.png соответственно. Я чувствую, что вы знаете, как это делать, поэтому объяснять не буду.

Чтобы использовать эти изображения в качестве фоновых нам понадобятся тэги span как блоки, для этого мы пропишем им правила display: block. Все остальное – просто, мы добавляем фоновое изображение к каждому span, делаем, чтобы один смещался влево и используем отступы для добавления зазоров между текстом и иконками.

p#contact-info span {
display: block;
}

span#phone {
background: url('../img/phone-icon.png') no-repeat 0px 1px;
float: left;
margin-top: 25px;
padding-left: 35px;
width: 125px;
}

span#address {
background:url('../img/address-icon.png') no-repeat 160px 30px;
padding:5px 0px 0px 195px;
}

Если мы посмотрим на дизайн теперь, то вот что увидим:

Все еще выглядит некрасиво, но уже скоро все будет ок!

Урок 14 - Навигационное меню

Это будет довольно тяжело. Мы используем довольно сложное меню и факт того, что оно выстроено по правую сторону – только усугубляет задачу. Но учитывая то, что мы уже создали меню в Photoshop – немного нам поможет.

Спрайты

Мы будем использовать технику, которая называется CSS спрайты. Вместо использования изображения для каждой ссылки, мы просто соединим их все в одно большое изображение, которое и называется спрайтом.

У этой техники масса преимуществ. Вместо загрузки двадцати изображений, загружается только одно. Это очень уменьшит время загрузки сайта и хорошо повлияет на ваш сервер.

Как же работают спрайты?

Сначала создайте новый документ 425*115 пикселей. Перетащите меню из PSD файла сайта в этот файл. Уберите все ненужные разрывы с помощью Ctrl + T и наконец избавьтесь от состояний наведения и активности, которые мы применили к Home и Portfolio для реалистичности дизайна. Итак, первая линия не содержит ни наведения, ни активности кнопки. Вот, что мы получим:

Теперь удвойте эту группу слоев дважды и разместите их подряд с отступами в 5 пикселей. Следующая линия – состояние наведения на кнопку, поэтому цвет должен быть другой - #6eb9cc. Третья линия – активное состояние, поэтому шрифт должен быть жирным. Вот как выглядит наш спрайт в итоге:

Конечно, надо сделать фон прозрачным. Я сделал его белым для ясности скриншота.

Как только это сделано, сохраните файл дл Web & Devices в PNG 24 и назовите его tabs-sprite.png.

При дизайне спрайта важно сохранять ширину каждого элемента неизменной, и выравнивать их аккуратно, чтобы не возникло проблем с использованием свойства background-position.

Хорошо, теперь у нас есть спрайт.

Перед началом использования фоновых изображений, надо разместить меню справа.

Помните мы придали блоку div с id="content" позиционирование relative (относительное). Вот это то нам сейчас и пригодится.

Используя абсолютное позиционирование (относительно контентного блока) мы будем двигать наше меню в то место куда мы хотим. Это означает, что координаты (0, 0) – это не верхний левый угол окна браузера,а верхний левый угол блока контента.

После размещения списка, нам надо заняться буллет-поинтами. Переместив их влево, мы перемещаем элементы в одном ряду. После добавления свойств высоты и ширины, мы добавляем фоновый рисунок к файлу sprite. Это означает, что каждый элемент беспорядочного списка будет разделять один и тот же фон, и это великолепие CSS Sprites.

Мы также используем функцию замещения изображений для удаления текстовых ссылок, чтобы ссылками были сами вкладки.

ul#tabs {
margin-top: 30px;
position: absolute;
right: 0px;
top: -65px;
}

ul#tabs li {
background: url('../img/tabs-sprite.png') no-repeat;
float: left;
height: 35px;
margin-right: 1px;
width: 70px;
}

ul#tabs li a {
display: block;
height: 100%;
text-indent: -9000px;
width: 100%;
}

Так, дальше надо задать стиль для каждой вкладки. Нам надо задать свойства фона для нескольких состояний ссылки. Обычное состояние ссылки, положение при наведенном курсоре мыши и наконец активного и текущего положения. Вот, например, что получилось для вкладки "предыдущий пункт" (стрелка влево в меню).

Не волнуйтесь насчет заданной ширины, это просто потому, что пункт "previous" шире, чем остальные. Просто делайте это для каждого пункта меню и не забудьте заменить пиксельные значения на правильные. Вы также можете использовать фотошоповские линейки . Вот как выглядит законченный код для всех пунктов меню:

ul#tabs li#previous {
background-position: 0px 0px;
width:80px;
}

ul#tabs li#previous:hover {
background-position: 0px -40px;
}

ul#tabs li#previous.current, ul#tabs li#previous:active {
background-position: 0px -80px;
}

ul#tabs li#home {
background-position: -80px 0px;
}

ul#tabs li#home:hover {
background-position: -80px -40px;
}

ul#tabs li#home.current, ul#tabs li#home:active {
background-position: -80px -80px;
}

ul#tabs li#portfolio {
background-position: -150px 0px;
}

ul#tabs li#portfolio:hover {
background-position: -150px -40px;
}

ul#tabs li#portfolio.current, ul#tabs li#portfolio:active {
background-position: -150px -80px;
}

ul#tabs li#about {
background-position: -220px 0px;
}

ul#tabs li#about:hover {
background-position: -220px -40px;
}

ul#tabs li#about.current, ul#tabs li#about:active {
background-position: -220px -80px;
}

ul#tabs li#contact {
background-position: -290px 0px;
}

ul#tabs li#contact:hover {
background-position: -290px -40px;
}

ul#tabs li#contact.current, ul#tabs li#contact:active {
background-position: -290px -80px;
}

ul#tabs li#next {
background-position: -360px 0px;
width: 65px;
}

ul#tabs li#next:hover {
background-position: -360px -40px;
}

ul#tabs li#next.current, ul#tabs li#next:active {
background-position: -360px -80px;
}

Вот и все с меню! Вот как теперь выглядит наш шаблон:

Урок 15 - Модули блога и твиттера

Начнем с основы как всегда. Самый простой вариант разметки даст нам следующее:

div#blog {
float: left;
margin: 50px 15px 0px 0px;
width: 385px;
}

После этого мы займемся заглавной строкой. Нам надо создать изображение для фона. Для этого зайдите в группу "Хедер блога", спрячьте текстовый слой и соедините иконку и форму. Сохраните как blog-header-bar.png

Мы можем добавить это фоновое изображение, как только мы определим высоту, ширину и отступы:

div#blog h4.module-header-bar {
background: url('../img/blog-header-bar.png') no-repeat;
height: 29px;
margin-bottom: 15px;
padding-top: 13px;
width: 385px;
}

Дальше надо отдельными заметками. Так как основная работа была сделана в typography.css, нам не надо делать здесь многого, просто добавим отступы.

div#blog div.blog-entry {
margin-left:15px;
}

div#blog div.blog-entry h5 {
float:left;
width:200px;
}

div#blog div.blog-entry blockquote {
clear:both;
padding:10px 0px 10px 15px;
}

div#blog div.blog-entry p.meta {
padding-top:4px;
}

Последний шаг – кнопка «Перейти на блог». Из-за того, что мы будем делать три состояния этой кнопки (обычное, наведенное и активное), мы здесь также будем использовать спрайт.

Просто перетащите группу слоев отвечающих за кнопку в новый документ и продублируйте ее дважды. Я оставил по 10 пикселей между каждым состоянием. Для наведенного состояния я изменил цвет текста на #6eb9cc, а для активного состояния, я оставил как Gradient Overlay, так и Stroke, чтобы создать 3D эффект при нажатии на нее. Вот как выглядит мой спрайт:

Я сохранил его как read-more-button.png. Теперь добавим код, который заставит работать наш спрайт.

p#read-more-wrapper {
float:right;
margin-top:10px;
width:215px;
}

p#read-more-wrapper a {
background:url('../img/read-more-button.png') no-repeat;
border:none;
display:block;
height:30px;
text-indent:-9000px;
width:214px;
}

p#read-more-wrapper a:hover {
background-position: 0px -30px;
}

p#read-more-wrapper a:active {
background-position: 0px -60px;
}

Мы закончили с модулем блога! Давайте посмотрим, как это выглядит.

Модуль твиттера

тут все также как и в модуле блога, поэтому пробежимся очень быстро.

Я думаю не надо объяснять, как получить фон заглавной строки. Просто не забывайте прятать текст перед слиянием. Назовите изображение twitter-header-bar.png.

Мы добавляем отступы и ширину, а дальше вставляем фон заглавной строки также, как и в ситуации с блогом.

div#twitter {
margin: 38px 0px 0px 415px;
width: 375px;
}

div#twitter h4.module-header-bar {
background: url('../img/twitter-header-bar.png') no-repeat;
height: 40px;
padding-top: 26px;
width: 385px;
}

После этого, мы работаем над каждым твитом. Обратите внимание, что мы перемещаем картинку, чтобы она появлялась слева от имени. Отступы определены с помощью блочной модели.

div#twitter div.tweet {
margin: 3px 0px 17px 30px;
}

div#twitter div.tweet img {
border: 1px solid #757575;
float: left;
height: 29px;
margin-right: 15px;
width: 29px;
}

div#twitter div.tweet h5 {
position: relative;
top: -3px;
}

Причина, по которой мы так разместили h4, лежит в первоначальной высоте строки Myriad Pro, которая достаточно нетрадиционна сама по себе.

Для кнопки «Смотреть ещё» просто замените текст в вашем спрайте «Перейти на блог» и снова его сохраните, только в этот раз как get-more-tweets-button.png. После этого, мы используем ту же технику, что и с кнопкой «Перейти на блог».

p#get-tweets-wrapper {
float:right;
margin-top:9px;
width:215px;
}

p#get-tweets-wrapper a {
background: url('../img/get-tweets-button.png') no-repeat;
border: none;
display: block;
height: 30px;
text-indent: -9000px;
width: 214px;
}

p#get-tweets-wrapper a:hover {
background-position: 0px -30px;
}

p#get-tweets-wrapper a:active {
background-position: 0px -60px;
}

По окончании этого модуля, мы также заканчиваем с кодированием стилей для всего блока контента! Я знаю, это было непросто, но только посмотрите, что у нас получилось. Я думаю, игра стоила свеч!

Урок 16 - Футер

Наш футер выполнен из двух частей. Первая – изображение, второй – текст.

По тем же причинам, по каким мы должны были редактировать изображение в хедере, нам надо сделать края изображения цветом #6eb9cc. Просто скопируйте изображение в новый документ и используйте Gradient Tool (G) для этого. Сохраните как PNG и назовите footer-image.png

Теперь добавим код. Он будет очень похож на тот, что мы использовали в хедере.

div#footer-image {
background: url('../img/footer-image.png') no-repeat #6eb9cc;
border-top: 2px groove #ffffff;
border-bottom:2px ridge #ffffff;
height:50px;
width:100%;
}

Наконец, для текста, мы добавляем уже созданный content-top-shadow.png как фоновый рисунок, чтобы создать эффект тени. Определяем высоту, ширину и отступы.

p#footer-text {
background: url('../img/content-top-shadow.png') repeat-x;
height: 37px;
padding-top: 13px;
width: 100%;
}

Вот и все с CSS

И это все; мы закончили работу с CSS. Было достаточно тяжело, правда? Когда кодируете – всегда помните продвигаться постепенно и логически – и все получится как нельзя лучше! Вот как выглядит наша страница в Firefox:

Я могу вас убедить в том, что страница выглядит также и в остальных браузерах: IE 8, Safari 3 и 4, Chrome 1 и 2, Firefox 3, и Opera 9.5, но не в IE7.

Там может быть много проблем, но все они решаемы. Это все можно легко устранить с помощью !important hack или условной таблицей стилей. Я не любитель hack, но вы можете использовать то, что больше нравится вам.

Исправление IE ошибок

Итак, мы будем использовать условные комментарии. Что это такое? Это комментарии, которые перенаправляют IE на те блоки, группы, тэги и так далее, на которые мы хотим. Другие браузеры воспримут комментарии как обычные комментарии и не будут их отображать. В нашем случае, мы сделаем ссылку на внешнюю таблицу стилей в таком комментарии.

Как только таблица стилей включена, мы можем начать исправлять ошибки. Создайте новую таблицу стилей ie7.css и сохраните в css папке.

Первое, что надо сделать – это исправить высоту верхней строки. Ничего сложного, просто установите высоту и убедитесь, что фон прикреплен к низу, так как его высота не 50, а 40 пикселей.

div#status-bar {
background-position: bottom;
height: 50px;
}

Дальше устраняем проблемы из-за несоответствия IE7 псевдо-форматов :before и :after. Вместо добавления <|> фоновыми рисунками или чего-то еще к ссылкам в меню, мы просто делаем больше пробел между ссылками, а потом центрируем. Нам также надо исправить непонимание IE обтекание объектов, которые не являются блоками. Это можно сделать, использую абсолютное позиционирование, и исправив левый отступ.

p#action-bar {
margin-left: 50px;
position: absolute;
text-align: center;
top: 10px;
}

p#action-bar a {
margin-right: 5px;
}

Теперь нам надо исправить проблему с неверным отображением центрального блока. Здесь нам на помощь придет блочная модель.

div#content {
padding-bottom: 0px;
padding-top: 75px;
}

ul#tabs {
top: 10px;
}

IE также неправильно отображает названия слайдов и все это из-за того, что мы использовали относительное позиционирование. Чтобы это исправить для IE мы зададим абсолютное позиционирование и сбросим значения параметров top и left.

div#slideshow-commands h4 {
left: 0px;
position: absolute;
top: 4px;
}

Finally, it happens that IE doubles the padding between the entry title and its content in the blog module. We can fix this by setting half the value to it.

И последняя проблема. Так получилось, что IE удваивает отступ между названием записи и её содержимым в модуле блога. Мы можем исправить это просто установив отступ в половинное значение от того, что используют нормальные браузеры.

И наконец, IE удваивает прослойку между названием записи и ее контентом в модуле блога. Мы можем исправить это, установив половину значения прослойки.

div.blog-entry blockquote {
padding-top: 5px;
}

Вот теперь и IE7 будет отображать наш дизайн корректно!

Урок 17 – JavaScript, jquery, cufon

Это не будет слишком сложно. Мы используем jQuery, jQuery Cycle Plugin, и Cufón. Я объясню, зачем и где вы можете их скачать по ходу.

Я использую здесь JavaScript с целью следования философии прогрессивного улучшения. Вроде бы как слайдшоу не будет правильно работать, если мы не включим JavaScript, но на самом деле оно могло бы, если бы добавили PHP к странице и изменили ссылки next и previous. Но это не тема нашей статьи, поэтому не будем останавливаться. JavaScript также смягчает шрифты. Это дает нам возможность использовать любой шрифт, который мы захотим, и который будет корректно отображаться, даже если у пользователя он не будет установлен. Если же у пользователя нет JavaScript, то он увидит наш резервный шрифт.

jQuery

В этой статье мы не будем использовать все возможности jQuery. Но все же он нам понадобится.

Чтобы использовать его в нашем шаблоне, нам естественно его надо вызвать. Вот что надо размеcтить в раздел «head».

Вот и все – теперь jQuery загружается вместе со страницей и позволяет использовать свои возможности.

Cufón

Я говорил про смягчение шрифтов, но это даже мягко сказано. Cufón позволяет нам показывать пользователю любой шрифт, даже если такового нету на его компьютере.

Я не буду рассказывать основы Cufón, так как Джефри Вей уже все сделал до меня вот здесь

Просто скачайте Cufón отсюда: http://cufon.shoqolate.com/generate и используйте онлайн конвертор шрифтов, чтобы переконвертировать Myriad Pro на файл JS.

Сохраните Cufón в папке JS и назовите его cufon.js, а также файл со шрифтом myriadpro.font.js.

Как только все будет в нужных папках, нам надо обратиться к ним из файла index.html. Добавьте тэги script в раздел "head" нашего документа, и используйте атрибут scr для обращения к файлам.

Не забудьте, что тэг script автоматически не закрывается. Вы не можете использовать синтаксис <script />, иначе будет ошибка подтверждения. Правильный синтаксис: <script></script> даже если тэг пуст.

Если вы перезагрузите страницу, то увидите, что… ничего не случилось. Это потому что надо обратиться к замене текста с помощью Cufón и указать нужные тэги.

Откройте новый тэг script, но вместо вызова внешнего файла JS, мы напишем код прямо в файле HTML. Мы можем это сделать, так как используем единственную линию кода. Если код должен быть длиннее, то тогда нужно использовать внешний файл. Метод, которым можно вызвать замену - Cufon.replace(), берущий тэг, который нужно заменить как аргумент.

Код, который нужно разместить выглядит вот так:

Перезагрузитесь и вы увидите, как Cufón аккуратно заменил все наши тэги h на изображения!

А что если у пользователя нет JavaScript? Тогда увиденным будет шрифт, указанный в CSS! Если у пользователя Myriad Pro, будет использован именно он, если нет – то резервный шрифт. Это преимущество прогрессивного усовершенствования.

Урок 18 - Слайдшоу

Последний шаг – оживление слайдшоу. чтобы это сделать, мы используем невероятно полезный плагин jQuery, который называется jQuery Cycle Plugin.

Вы можете достать его здесь: http://malsup.com/jquery/cycle/lite/. Мы не будем использовать ничего сложного, поэтому версия Lite абсолютно нам подходит. А весить это будет всего 3 кб!

Убедитесь, что скачиваете сжатую версию плагина, после чего разместите его в папке JS под именем cycle.js. Потом нам надо будет вызвать его с HTML. Сделайте вызов к Cycle plugin под вызовом к jQuery, чтобы убедиться, что плагин будет добавлен к библиотеке!

Далее нам надо заняться эффектом, используя код JavaScript. Тут мы детальней можем указать такие опции, как Previous и Next команды и другое. Мы поместим этот код в новый файл slideshow.js в папку JS, который потом будет вызван из HTML.

Перед кодирование, мы должны решить, что мы хотим, чтобы слайдшоу делало. Базовое решение – взять каждый элемент из контейнера и по очереди заставить их перемещаться, закрывая друг друга. Кроме автоматического изменения слайдов каждые 5 секунд, мы хотим, чтобы они менялись при нажатии на кнопки Previous и Next. Мы также хотим, чтобы слайдшоу приостанавливалось, если мы наводим на него мышкой. Это полезно, так как у людей есть время кликнуть на изображении, если им это интересно.

К счастью, все это очень легко сделать, используя Cycle plugin. Как только готов DOM, укажите jQuery взять контейнер #slides, и начать слайдшоу, используя метод cycle().

Вот как должен выглядеть ваш код:

$(document).ready(function()
{
$('#slides').cycle({
prev : '#previous-slide',
next : '#next-slide',
timeout : 5000,
pause : 1
});
});

Что означают эти свойства? «Prev» и «next» – это, естественно ID команд «Previous» и «Next», «delay» – это время между каждым слайдом в милисекундах, а если значение «pause» равняется «1», то слайдшоу будет останавливаться при наведении на слайд мышки.

Теперь, если мы перезагрузим страницу, то увидим, что все отлично работает, кроме названия, которое все время остается одним и тем же. Мы решим эту проблему, вызывая функцию перед каждым слайдом. Функция будет извлекать атрибуты alt и href следующего слайда с целью замены h4 и ссылки нужным образом. Вот как будет выглядеть функция:

function changeTitle()
{
var title = $(this).find('img').attr('alt');
var href = $(this).attr('href');

$('#slide-title').text(title).attr('href', href);
}

Но это не будет работать, если мы не укажем, что такая функция должна бать вызвана до изменения слайда.

Для этого, нам просто надо указать свойство «before» в коде, который мы использовали ранее. Значением этого свойства должно быть имя функции. А кавычки вокруг функции в данном случае использовать не нужно.

Вот как выглядит полный работающий код:

$(document).ready(function()
{
$('#slides').cycle({
prev : '#previous-slide',
next : '#next-slide',
timeout : 5000,
pause : 1,
before : changeTitle
});
});

function changeTitle()
{
var title = $(this).find('img').attr('alt');
var href = $(this).attr('href');

$('#slide-title').text(title).attr('href', href);
}

Отлично, если мы перезагрузим нашу страницу, то заметим, что слайдшоу работает именно так, как мы этого хотели, и это всего лишь благодаря нескольким строчкам кода! Вот в этом сила jQuery и его плагинов.

Финиш

На этом всё. Мы с вами создали код для целого вебсайта, используя xHTML 1.0, CSS 2.1 и JavaScript на основе PSD шаблона, который мы сделали в предыдущей части.

Автор: Felix Boyeaux

Перевод: Евгений Попов

Ссылка на оригинал

P.S. Перевод вольный, выполнялся как поясняющая инструкция для записи видеокурса по верстке сайта, сделанного в фотошопе.